
<template>
  <div class="root">
    <NavigationVue></NavigationVue>
    <div class="pl-10 pr-10">
      <div>
        <!-- ：list组件调用方式<CourseItemVue :list="courseList"></CourseItemVue> -->
        <div
          class="course"
          @click="coursedetail(index)"
          v-for="(item, index) in courseList"
          :key="index"
        >
          <div class="course-left">
            <div class="course-photo">
              <van-image
                width="100"
                height="80"
                fit="cover"
                src="http://courses.zj.edu.cn/static/assets/images/course-cover/network/2-cf58d16e.jpg"
              />
            </div>
          </div>
          <div class="course-right">
            <div class="course-name">{{ item.cou_name }}</div>
            <div class="course-time">
              <p>授课时间：</p>
              {{ item.cou_year }}第{{ item.cou_term }}学期
            </div>
            <div class="course-teacher">
              <p>授课老师：</p>
              {{ item.tch_name }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import NavigationVue from "@/components/Navigation.vue";
import request from '@/utils/request';

export default {
  data() {
    return {
      courseList: [
        {
          cou_id:"1",
          cou_name: "高一数学",
          cou_num:"21",
          cou_year: "20-21年",
          cou_Term: "1",
          tch_name: "11111111",
        },
      ],
    };
  },
  created() {

    this.load();
  },
  components: {
    NavigationVue,
    
  },
  methods: {
    load() {
      request
        .get("courselist.php", {
          params: {
            stu_id:localStorage.getItem("zyh_stu_id"),
            // currentPage: this.currentPage,
            // pageSize: this.pageSize,
            // search: this.search,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.code == "-1") {
            this.$router.push("/login");
          } else {
            console.log(res.data)
            this.courseList=res.data
          }
        });
    },

    coursedetail(i) {
      localStorage.setItem("zyh_cou_name", this.courseList[i].cou_name);
      localStorage.setItem("zyh_cou_year", this.courseList[i].cou_year);
      localStorage.setItem("zyh_cou_Term", this.courseList[i].cou_Term);
      localStorage.setItem("zyh_tch_name", this.courseList[i].tch_name);
      console.log(localStorage.getItem("zyh_tch_name"))
      this.$router.push({
        path:"/coursedetail",
        query:{
          cou_id:this.courseList[i].cou_id
        }
      })
    },
  },
};
</script>

<!-- <script lang="ts" setup>
import NavigationVue from "@/components/Navigation.vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const coursedetail = () => {
  router.push("/coursedetail/1");
};
const courseList = ref([
  {
    cou_Name: "高一数学",
    cou_Year: "20-21年",
    cou_Term: "第一学期",
    tch_Name: "11111111",
  },
]);
</script>    -->

<style >
.course {
  display: flex;
  height: 100px;
  margin-top: 5px;
  background-color: rgb(227, 228, 230);
}

.course-left {
  height: 100px;
  width: 110px;
}

.course-right {
  padding-left: 5px;
  height: 100px;
  width: 200px;
  /* background-color: rgb(158, 157, 157); */
}

.course-photo {
  padding-top: 10px;
  padding-left: 5px;
}

.course-name {
  height: 40px;
  line-height: 40px;
  color: rgb(163, 108, 40);
  font-size: 15px;
}
.course-time {
  padding-top: 5px;
  display: flex;
  font-size: 12px;
}
.course-teacher {
  padding-top: 5px;
  display: flex;
  font-size: 12px;
}
</style>


